<template>
  <div class="order">
    <back-nav
      :leftArrow="true"
      :title="'我的订单'"
      :leftText="'返回'"
    ></back-nav>
    <div class="orderBox">
      <div class="selector">
        <div
          v-for="(item, index) in selectArr"
          :key="index"
          @click="toggle(index)"
          :class="['text', { active: currentIndex == index }]"
        >
          {{ item }}
        </div>
      </div>
      <div class="bigBox">
        <div class="makeBox" v-if="makeFlag">
          <div class="make">
            <div class="leftImg">
              <img :src="makeArr.img" class="auto-img" />
            </div>
            <div class="makeText">
              <div class="zn-name">{{ makeArr.text }}</div>
              <div class="countShop">等共{{ makeArr.number }}件商品</div>
              <div class="price">￥{{ makeArr.price }}</div>
            </div>
            <div class="rightImg">
              <img src="../assets/images/make.png" class="auto-img" />
            </div>
          </div>
          <div class="makeBottom">
            <div>Lucking派送 约1小时左右送达</div>
            <div class="making">制作中</div>
          </div>
        </div>
        <!-- 完成的订单 -->
        <div v-if="completeFlag">
          <div class="complete" v-for="(item,index) in  orderComplete" :key="index">
            <!-- 订单号 -->
            <div class="orderNum">
              <div class="num">{{orderArr[index]}}</div>
              <div class="removeIcon" @click="removeOrder(item)">
                  <img src="../assets/images/sc.png"  class="auto-img">
              </div>
            </div>
            <div v-for="(v, i) in item" :key="i">
              <order-list :prop="v"></order-list>
            </div>
          </div>
        </div>
        <!-- 正在制作的订单 -->
       <div v-if=" activeFlag">
          <div class="complete" v-for="(item,index) in orderActive" :key="index">
            <!-- 订单号 -->
            <div class="orderNum">
              <div class="num">{{orderArr[index]}}</div>
              <div class="res" @click="getAffirm(item)">确认收货</div>
            </div>
            <div v-for="(v, i) in item" :key="i">
              <active-list :prop="v"></active-list>
            </div>
          </div>
        </div>
        <div class="none" v-if="displayFlag">
          <div class="noShop">
            <img src="../assets/images/noshop.png" class="auto-img">
          </div>
          <div class="noText">暂无商品数据!</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import backNav from "../components/BackNav.vue";
import orderList from "../components/OrderList.vue";
import activeList from "../components/ActiveList.vue";
export default {
  name: "myOrder",
  components: {
    backNav,
    orderList,
    activeList,
  },
  data() {
    return {
      //   选择的类型的数据
      selectArr: ["全部", "进行中", "已完成"],
      currentIndex: 0,
      orderList: [],
      //   控制制作的开关
      makeFlag: true,
      //    制作的数据
      makeArr: {
        img: "",
        text: "",
        price: 0,
        number: 0,
      },
      activeFlag: false,
      displayFlag: false,
      // 完成的开关
      completeFlag: true,
      //    完成的订单
      orderComplete: [],
      // 存储订单号
      orderArr: [],
       orderActive:[],
    };
  },
  methods: {
    toggle(index) {
      if (this.currentIndex == index) {
        return;
      }
      this.currentIndex = index;
      this.getDetailOrder(this.currentIndex);
      switch (index) {
        case 0:
          this.makeFlag = true;
          this.activeFlag = false;
          this.completeFlag = true;
          if (this.complete.length === 0) {
            this.displayFlag = true;
          } else {
            this.displayFlag = false;
          }
          break;
        case 1:
          this.makeFlag = false;
          this.activeFlag = true;
          this.completeFlag = false;
          if (this.activeArr.length === 0) {
            this.displayFlag = true;
          } else {
            this.displayFlag = false;
          }
          break;
        case 2:
          this.makeFlag = false;
          this.activeFlag = false;
          this.completeFlag = true;
      }
    },
    // 获取订单详情
    getDetailOrder(index) {
      // 每次调用初始化
      this.activeArr = [];
      this.complete = [];
      this.axios({
        method: "get",
        url: "/findOrder",
        params: {
          status: index,
        },
      })
        .then((res) => {
          let allPrice = 0;
          if (res.data.code == 70000) {
            this.orderList = res.data.result;
            this.orderList.forEach((item) => {
              if (item.status == 1) {
                this.activeArr.push(item);
              } else if (item.status == 2) {
                this.complete.push(item);
              }
            });
            if (this.complete.length === 0) {
              this.displayFlag = true;
            } else {
              this.displayFlag = false;
            }
            this.activeArr.forEach((item) => {
              allPrice += Number(item.price) * item.count;
            });
            if (this.activeArr.length > 0) {
              this.displayFlag = false;
              this.makeArr.img = this.activeArr[0].smallImg;
              this.makeArr.text = this.activeArr[0].name;
              this.makeArr.price = allPrice;
              this.makeArr.number = this.activeArr.length;
              // 先看看有几种订单号
              let orderNumber = [];
              let numberArr = [];
              let arr = [];
              let endArr = [];
              this.activeArr.forEach((item) => {
                if (orderNumber.indexOf(item.oid)) {
                  orderNumber.push(item.oid);
                }
              });
              // 分组
              for (let i = 0; i < orderNumber.length; i++) {
                let des = this.activeArr.filter((item) => {
                  return item.oid == orderNumber[i];
                });
                numberArr.push(des);
              }
              // 存储订单号
              this.orderArr = orderNumber;
              numberArr.forEach((item, index) => {
                item.forEach((element) => {
                  if (arr.indexOf(element.name) == -1) {
                    arr.push(element.name);
                  }
                });
                for (let i = 0; i < arr.length; i++) {
                  let res = item.filter((item) => {
                    return item.name == arr[i];
                  });
                  endArr.push(res);
                }
                numberArr[index] = endArr;
                //  重置
                arr = [];
                endArr = [];
              });
              this.orderActive=numberArr;
            } else {
              this.makeFlag = false;
              this.orderActive=[]
            }
           if (this.complete.length > 0) {
              // 先看看有几种订单号
              let orderNumber = [];
              let numberArr = [];
              let arr = [];
              let endArr = [];
              this.complete.forEach((item) => {
                if (orderNumber.indexOf(item.oid)) {
                  orderNumber.push(item.oid);
                }
              });
              // 分组
              for (let i = 0; i < orderNumber.length; i++) {
                let des = this.complete.filter((item) => {
                  return item.oid == orderNumber[i];
                });
                numberArr.push(des);
              }
              // 存储订单号
              this.orderArr = orderNumber;
              numberArr.forEach((item, index) => {
                item.forEach((element) => {
                  if (arr.indexOf(element.name) == -1) {
                    arr.push(element.name);
                  }
                });
                for (let i = 0; i < arr.length; i++) {
                  let res = item.filter((item) => {
                    return item.name == arr[i];
                  });
                  endArr.push(res);
                }
                numberArr[index] = endArr;
                //  重置
                arr = [];
                endArr = [];
              });
              this.orderComplete=numberArr;
            }else{
               this.orderComplete=[]
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 确认收货
    getAffirm(data) {
        this.axios({
          method: "post",
          url: "/receive",
          data: {
            oid: data[0][0].oid,
          },
        })
          .then((res) => {
            console.log(res);
            if (res.data.code === 80000) {
              this.$toast(res.data.msg);
              this.getDetailOrder(this.currentIndex)
            }
          })
          .catch((err) => {
            console.log(err);
          });
    },
    // 删除订单
    removeOrder(data) {
        this.axios({
          method: "post",
          url: "/removeOrder",
          data: {
            oid:data[0][0].oid,
          },
        })
          .then((res) => {
            console.log(res);
            if (res.data.code === 90000) {
              this.$toast(res.data.msg);
              this.getDetailOrder(this.currentIndex)
            }
          })
          .catch((err) => {
            console.log(err);
          });
    },
  },
  created() {
    this.getDetailOrder(this.currentIndex);
  },
};
</script>
<style lang="less" scoped>
@import url("../assets/base.less");
.orderBox {
  .selector {
    display: flex;
    width: 60%;
    height: 80px;
    align-items: center;
    justify-content: space-around;
    font-size: 14px;
    padding: 0px 10px;
    color: #bebebe;
    .text {
      width: 60px;
      height: 25px;
      line-height: 25px;
      text-align: center;
      border-radius: 20px;
    }
  }
  .active {
    background-color: @mainColor;
    color: #fff;
  }
  .bigBox {
    position: absolute;
    width: 100%;
    top: 126px;
    bottom: 10px;
    padding: 0px 20px;
    box-sizing: border-box;
    overflow-y: auto;
    .makeBox {
      height: 160px;
      overflow: hidden;
      border-radius: 10px;
      box-shadow: 0px 2px 8px rgb(204, 200, 200);
      .make {
        height: 120px;
        background-color: #fff;
        display: flex;
        align-items: center;
        padding: 0px 25px;
        .leftImg {
          height: 70px;
          width: 70px;
        }
        .makeText {
          height: 70px;
          margin-left: 20px;
          .zn-name {
            font-size: 15px;
            font-weight: bold;
          }
          .countShop {
            color: #bebebe;
            margin-top: 5px;
          }
          .price {
            font-size: 12.5px;
            color: #939393;
            margin-top: 10px;
          }
        }
        .rightImg {
          height: 70px;
          width: 90px;
          margin-left: auto;
          .auto-img {
            height: 100%;
          }
        }
      }
      .makeBottom {
        height: 40px;
        padding: 0px 15px;
        background: @mainColor;
        display: flex;
        align-items: center;
        color: rgb(248, 246, 246);
        font-size: 6px;
        .making {
          margin-left: auto;
        }
      }
    }
    .orderNum{
       display: flex;
       height: 40px;
       padding: 0px 20px;
       align-items:flex-end;
       .num{
         font-size: 14px;
         color: rgb(107, 105, 105);
       }
       .res{
         margin-left: auto;
         color: @importance;
       }
       .removeIcon{
         height: 20px;
         width: 20px;
         margin-left: auto;
       }
    }
  }
  .none {
    height: 300px;
    text-align: center;
    font-size: 20px;
    padding-top: 50px;
    .noShop{
      height: 120px;
      width: 140px;
      margin:30px auto;
    }
    .noText{
      margin-top: -10px;
    }
  }
}
</style>